<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ</title>
    <link rel="stylesheet" href="./css/0318.css">
    <style>
        .my-friends-info{
            width:100%;
            list-style: none;
        }
        .message-box{
            width:400px;
            height: 500px;
            position: fixed;
            left: 5px;
            bottom: 5px;
            border-radius: 20px;
            /*来点淡淡的阴影*/
            box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
            padding: 5px;
            overflow-y: auto;
        }
        .send-box{
            width: 580px;
            height: 50px;
            position: fixed;
            left: 650px;
            bottom: 50px;
            border-radius: 10px;
            /*来点淡淡的阴影*/
            box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
            padding: 5px;
        }
    </style>
</head>
<body>
    <!--消息盒子-->
    <div class="message-box" id="message-box">

    </div>
    <!--发送盒子-->
    <div class="send-box">
        <!--对方的名字-->
        <span id="myFriendName" userId=""></span>
        <input type="text" name="msgInput" class="send-box-input" placeholder="输入你的消息">
        <button class="send-box-button" onclick="sendMsg()">发送</button>
    </div>
</body>
    <button onclick='javascript:window.location="https://ys.mihoyo.com"'>点击启动</button>

    <!--登录弹框-->
    <div class="login-box">
        <div class="user-login">
            <h1>用户登录</h1>
            用户名：<input type="text" name="username"><br>
            密 码：<input type="password" name="password"><br>
            <button id="submit">登 录</button>
            <div id="error-msg">

            </div>
            <h1>用户注册</h1>
            昵称： <input type="text" name="nickname"><br>
            密码： <input type="password" name="password2"><br>
            电话： <input type="text" name="phone"><br>
            <button id="register" onclick="register()">注册</button>
        </div>
    </div>

    <div class="user-info">
        <span id="username"></span>
        <div class="login-out" onclick="loginOut()">退出登录</div>
    </div>
    <div class="box" style="background-color: #a86e35" onclick="javascript:$('.add-friend').show();">
        添加好友
    </div>
    <div class="box" style="background-color: #56a835"  onclick="getMyFriendsInfo()">
        好友通知
    </div>
    <div class="box" style="background-color: #a83535" onclick="friendsList()">
        好友列表
    </div>
    <div class="box" style="background-color: #35a885">
        聊天室（单聊）
    </div>
    <div class="box" style="background-color: #3578a8">
        聊天室（群聊）
    </div>
    <div class="box" style="background-color: #7e35a8">
        删除好友
    </div>

    <!--添加好友的弹框-->
    <div class="add-friend">
        <input type="text" name="searchPhone" placeholder="请输入手机号">
        <button id="search">搜索</button>
        <button onclick="javascript:$('.add-friend').hide();">关闭</button>
        <ul id="userInfoList">

        </ul>
    </div>

    <!--好友信息弹框-->
    <div class="friend-info">
        <button onclick="javascript:$('.friend-info').hide();">关闭</button>
        <ul id="myFriendsInfo" class="my-friends-info">

        </ul>
    </div>

    <!--好友列表-->
    <div class="friend-list">
        <button onclick="javascript:$('.friend-list').hide();">关闭</button>
        <ul id="friendsList" class="my-friends-info" style="overflow-y: scroll">

        </ul>
    </div>
</body>
<script src="https://pss.bdstatic.com/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
<script src="./js/login.js"></script>
<script src="./js/selectByPhone.js"></script>
<script src="./js/socket.js"></script>
<script>
    //发送信息
    function sendMsg(){
        //获取msgInput输入框输入内容
        var msg = $('.send-box-input').val();
        console.log("你要发送的是：",msg);
        //清空msgInput输入框
        $('.send-box-input').val('');
        var id = $("#myFriendName").attr("userId");

        //发送消息 JSON
        var msgData = JSON.stringify({
            "msg":msg,
            "id":id
        })
        ws.send(msgData);
    }
    //选中好友
    function selectFriend(id,nickname){
        $("#myFriendName").text(nickname);
        $("#myFriendName").attr("userId",id);
    }
    //显示好友列表
    function friendsList(){
        $('.friend-list').show();
        //发送请求获取我的好友列表
        $.ajax({
            url:"/users-friend/getMyFriends",
            type:"get",
            headers:{
                "token":localStorage.getItem("token")
            },
            success:function (res) {
                // console.log(data);
                var html = '';
                for(var i=0;i<res.data.length;i++){
                    var id = res.data[i].userId;
                    var nickname = res.data[i].nickname;
                    html += `<li onclick="selectFriend(${id},'${nickname}')" style="cursor: pointer;margin-top: 20px">${nickname}</li>`;
                }
                $('#friendsList').html(html);
            }
        })
    }


    //获取我的好友信息
    function getMyFriendsInfo(){
        $('.friend-info').show();
        //发送请求获取加我的好友信息
        $.ajax({
            url:"/users-friend/getMyFriendsAddInfo",
            type:"get",
            headers:{
                "token":localStorage.getItem("token")
            },
            success:function(res){
                console.log(res);
                if(res.code == 200){
                    var html = "";
                    for(var i=0;i<res.data.length;i++){
                        html += "<li><span>"+res.data[i].nickname+"</span>" +
                            "<button info-id='"+res.data[i].id+"' class='my-friends-yes'>同意</button>" +
                            "<button info-id='"+res.data[i].id+"' class='my-friends-no'>拒绝</button></li>";
                    }
                    $('.my-friends-info').html(html);
                    setTimeout(()=>{
                        $(".my-friends-yes").on("click",function(){
                            friendHandling($(this).attr("info-id"),1);
                        });
                        $(".my-friends-no").on("click",function(){
                            friendHandling($(this).attr("info-id"),2);
                        });
                    },1000);
                }
            }
        })
    }
//如果status是1同意 2拒绝
function friendHandling(msgId,status){
    $.ajax({
        url:"/users-friend/friendReview",
        type:"post",
        contentType:"application/json",//不写会报415
        headers:{
            "token":localStorage.getItem("token")
        },
        data:JSON.stringify({//400是JSON没转
            "id":msgId,
            "status":status
        }),
        success:function(res){
            alert(res.msg);
            if(res.code == 200){
                //刷新列表
                getMyFriendsInfo();
            }
        }
    })
}

</script>
<script>
    //用户注册
    function register(){
        var username = $("input[name='nickname']").val();
        var password = $("input[name='password2']").val();
        var phone = $("input[name='phone']").val();
        $.ajax({
            url:"/users-info/add",
            type:"post",
            contentType: "application/json",
            data:JSON.stringify({
                "nickname":username,
                "password":password,
                "phone":phone
            }),
            success:function (data) {
                if(data.code == 200){
                    alert("注册成功");
                    //清除输入框
                    $("input[name='nickname']").val("");
                    $("input[name='password2']").val("");
                    $("input[name='phone']").val("");
                }else{
                    alert(data.msg);
                }
            }
        })
    }

    //退出登录
    function loginOut(){
        //完成服务器token的过期
        $.ajax({
            url:"/users-info/loginOut",
            type:"post",
            contentType:"application/json",
            headers:{
                "token":localStorage.getItem("token")
            },
            success:function (data) {
                //完成本地清除
                localStorage.removeItem("token");
                localStorage.removeItem("nickname")
                window.location.reload();
            },
            error:function (data) {
                //退出登录都报错就直接删除token
                localStorage.removeItem("token");
                localStorage.removeItem("nickname")
                window.location.reload();
            }
        })
    }
</script>
</html>